<script setup lang="ts">
import { ref, onMounted } from "@vue/runtime-core"

interface Sitelist {
    name: string
    number: number
    adds: string
    checked: boolean
    name1: string
    name2: string
    name3: string
    nikeName: string
}

const sitelist = ref<Sitelist[]>([])

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const checkboxClick = (e: any) => {
    let add = sitelist.value.splice(e, 1)  //截取指定位置

    sitelist.value.unshift(add[0])   //把截取到的数据添加到地址列表

    localStorage.sitelist = JSON.stringify(sitelist.value)

    let lists = sitelist.value[0].checked = false

    console.log("lists", lists)

}

onMounted(() => {
    let arr = localStorage.sitelist
    if (arr) {
        sitelist.value = JSON.parse(arr)
    }
})

</script>

<template>
    <div>
        <div class="top" @click="$router.go(-1)">
            <van-icon name="arrow-left" />
        </div>
        <div class="addressbigbox">
            <div class="addressbox" v-for="(item, i) in sitelist" :key="i">
                <div class="address">
                    <div class="name">
                        {{ item.nikeName }} <text>{{ item.number }}</text>
                    </div>
                    <div class="ipbox">
                        {{ item.name1 }}{{ item.name2 }}{{ item.name3 }} {{ item.adds }}
                    </div>
                </div>
                <div class="bottombox">
                    <div class="leftbox">
                        <!-- <input type="radio" v-if="item.checked" name="radio" @click="checkboxClick(i)">

                        <input type="radio" name="111" v-else @click="checkboxClick(i)"> -->

                        <div class="checkbox" :class="{ checked: i == 0 ? 'checked' : '' }" name="111"
                            @click="checkboxClick(i)">
                        </div>

                        <div>设为默认地址</div>

                        <!-- <div class="rightbox">
                            <div>删除</div>
                            <div>编辑</div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="foot" @click="$router.push({ path: '/adds' })">
                    <div>手动添加地址</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.top {
    width: 100vw;
    height: 45px;
    line-height: 45px;
}

.page {
    background-color: #F5F6F7;
}

.addressbigbox {
    padding: 30rpx;
}

.addressbox {
    background-color: #fff;
    padding: 20rpx;
    border-radius: 10px;
    margin-bottom: 5px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.21);
}

.addressbox .address {
    /* padding: 20rpx; */
    border-bottom: 2px solid #f6f6f6;
    margin-bottom: 16rpx;

}

.addressbox .address .name {
    padding-top: 10rpx;
    margin-bottom: 20rpx;
    color: #323232;
    font-size: 34rpx;
}

.addressbox .address .name text {
    color: #323232;
    font-size: 32rpx;
}


.addressbox .address .ipbox {
    font-size: 25rpx;
    color: #aaaaaa;
    margin-bottom: 30rpx;
}

.addressbox .bottombox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.bottombox .leftbox {
    display: flex;
    align-items: center;
}

.bottombox .leftbox text {
    font-size: 25rpx;
    color: #aaaaaa;
}

.bottombox .leftbox .checkbox {
    width: 16px;
    height: 16px;
    border: 1px solid #EAEAEA;
    margin-right: 9px;
    border-radius: 50%;
    align-self: center;
}

.bottombox .leftbox .checkbox.checked {
    background-color: #FF5937;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 32rpx;
}



.bottombox .rightbox div {
    font-size: 25rpx;
    color: #aaaaaa;
    margin-left: 18rpx;
    margin-right: 18rpx;
}



.footer {
    position: fixed;
    bottom: 0px;
    width: 100%;

}

.footer .foot {
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    padding: 10rpx 0px;
}

.footer .foot {
    padding: 10px 60px;
    background-color: #ff5e2d;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}
</style>